<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="tips"></div>
</body>
<script>
    // 距离双11还有xx天xx时xx分xx秒

    // => 当前时间 距离 未来时间 还有多久

    // var future = new Date("2022-11-11 00:00:00");
    // console.log(future);

    // var now = new Date();  //默认获取当前时间

    // var time = Math.floor((future - now) / 1000);
    // console.log(time);

    // var day = parseInt(time / (24 * 60 * 60));
    // console.log("天", day);

    // // 总的时间 % 一天的时间 => 不满一天的时分秒  (余数肯定比除数小)
    // // 不满一天的时分秒 / 一小时 => 小时的倍数 (不满一天)
    // var hour = parseInt(time % (24 * 60 * 60) / (60 * 60));
    // console.log("小时", hour);

    // // 总的时间 / 一小时的时间  => 总的小时的倍数 => 向下取值
    // // 总的小时的倍数 %  24 => 小时的倍数 (不满一天)
    // var hour = parseInt(time / (60 * 60)) % 24;
    // console.log("小时", hour);

    // // 总的时间 / 一分钟的时间  => 总的分钟的倍数 => 向下取值
    // // 总的分钟的倍数 %  60 => 分钟的倍数 (不满一小时)
    // var minute = parseInt(time / 60) % 60;
    // console.log("分", minute);

    // var second = time % 60;
    // console.log("秒", second);


    // var str = `距离双11还有${day}天${hour}时${minute}分${second}秒`;
    // document.write(str);

</script>

<script>
    var tips = document.getElementsByClassName("tips")[0];

    timeLog(); //页面加载时执行一次

    // 传入一个函数 ->  等页面加载完毕之后 => 计时1s执行
    var timer = setInterval(timeLog, 1000);


    function timeLog() { // 等页面加载完毕之后 => 计时1s执行 
        // 距离双11还有xx天xx时xx分xx秒

        // => 当前时间 距离 未来时间 还有多久

        var future = new Date("2022-11-11 00:00:00");
        console.log(future);

        var now = new Date();  //默认获取当前时间

        var time = Math.floor((future - now) / 1000);
        console.log(time);

        var day = parseInt(time / (24 * 60 * 60));
        console.log("天", day);

        // 总的时间 % 一天的时间 => 不满一天的时分秒  (余数肯定比除数小)
        // 不满一天的时分秒 / 一小时 => 小时的倍数 (不满一天)
        var hour = parseInt(time % (24 * 60 * 60) / (60 * 60));
        console.log("小时", hour);

        // 总的时间 / 一小时的时间  => 总的小时的倍数 => 向下取值
        // 总的小时的倍数 %  24 => 小时的倍数 (不满一天)
        var hour = parseInt(time / (60 * 60)) % 24;
        console.log("小时", hour);

        // 总的时间 / 一分钟的时间  => 总的分钟的倍数 => 向下取值
        // 总的分钟的倍数 %  60 => 分钟的倍数 (不满一小时)
        var minute = parseInt(time / 60) % 60;
        console.log("分", minute);

        var second = time % 60;
        console.log("秒", second);

        // 在输出之前 要判断 时分秒 是否小于10 
        // 如果小于10   => 01 02 03
        // 大于10   =>  不做任何操作

        // hour = (hour < 10 ? "0" + hour : hour);
        // minute = (minute < 10 ? "0" + minute : minute);
        // second = (second < 10 ? "0" + second : second);


        var str = `距离双11还有${day}天${beauty(hour)}时${beauty(minute)}分${second < 10 ? "0" + second : second}秒`;
        tips.innerText = str;  //每隔1s改变盒子中的内容  

    }

    function beauty(num) {
        return num < 10 ? "0" + num : num;
    }


</script>

</html>